<script setup>

import SvgIcon from "../../../Svglcon.vue";
</script>

<template>
  <div class="attributeSheetWarp">
    <div class="attributeSheet">
      <div class="baseProperty">
        <div class="titleBar">
          <div style="font-size: 20px">
            <svg-icon name="close"/>
          </div>
          <div class="title">基础属性</div>
        </div>
        <div class="detailAttrs">
          <div class="propertyLabel">
            <div class="labelTitle">名称：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">编码：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">分类：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">长：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">宽：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">高：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">色系：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">材质/肌理：</div>
            <div class="labelMessage"></div>
          </div>


        </div>
      </div>
      <div class="craftProperty">
        <div class="titleBar">
          <div style="font-size: 20px">
            <svg-icon name="close"/>
          </div>
          <div class="title">工艺属性</div>
        </div>
        <div class="detailAttrs">
          <div class="propertyLabel">
            <div class="labelTitle">技术标准：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">安装标准：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">通电需求：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">具体设置要求：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">项目特征：</div>
            <div class="labelMessage"></div>
          </div>


        </div>
      </div>
      <div class="designProperty">
        <div class="titleBar">
          <div style="font-size: 20px">
            <svg-icon name="close"/>
          </div>
          <div class="title">设计属性</div>
        </div>
        <div class="detailAttrs">
          <div class="propertyLabel">
            <div class="labelTitle">品牌应用：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle">F0H版本号：</div>
            <div class="labelMessage"></div>
          </div>
          <div class="propertyLabel">
            <div class="labelTitle"></div>
            <div class="labelMessage"></div>
          </div>


        </div>


      </div>


    </div>
  </div>
</template>

<style scoped lang="scss">
.attributeSheet {
  width: 220px;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  flex-direction: column;

  .detailAttrs {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5px;

    .propertyLabel {
      display: flex;

      .labelTitle {

      }

      .labelMessage {
        flex: 1;

      }


    }


  }

  .titleBar {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #EEEEEE;

    .title {
      width: 100%;
      font-size: 14px;
      text-align: left;
      color: #999999;

    }

  }

  .baseProperty {
    height: 210px;
    box-sizing: border-box;
    margin-bottom: 5px;
    border: 1px solid #CCCCCC;
    display: flex;
    flex-direction: column;


  }

  .craftProperty {
    height: 150px;
    box-sizing: border-box;
    margin-bottom: 5px;
    border: 1px solid #CCCCCC;
    display: flex;
    flex-direction: column;
  }

  .designProperty {
    height: 110px;
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    display: flex;
    flex-direction: column;
  }


}

</style>